<template>
  <!-- 主播管理 -->
  <a-spin class="anchor-manag" anchor-manag tip="加载中..." :spinning="isLoading">
    <div>
      <!-- 筛选 -->
      <div class="filter">
        <div class="l search-box">
          <div>
            <span>主播：</span>
            <a-input-search style="width:240px;margin-right:10px;" type="text" placeholder="输入主播姓名/手机号/ID搜索" allowClear v-model="search.keyWord" @search="handleByQueryCond" />
          </div>
          <div>
            <span>状态：</span>
            <a-select style="width:160px" placeholder="请选择状态" v-model="search.status" @change="handleByQueryCond">
              <a-select-option value="">全部</a-select-option>
              <a-select-option v-for="item in anchorPersonalStatus" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
            </a-select>
          </div>
          <div>
            <span>账户类型：</span>
            <a-select style="width:160px" placeholder="请选择账户类型" v-model="search.accountType" @change="handleByQueryCond">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">个人</a-select-option>
              <a-select-option value="2">公司</a-select-option>
            </a-select>
          </div>
          <div>
            <span>结算类型：</span>
            <a-select style="width:160px" placeholder="请选择结算类型" v-model="search.settlementType" @change="handleByQueryCond">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">A</a-select-option>
              <a-select-option value="2">B</a-select-option>
              <a-select-option value="3">C</a-select-option>
              <a-select-option value="4">D</a-select-option>
            </a-select>
          </div>
          <div>
            <span>合作时间：</span>
            <a-range-picker @change="handleByQueryCond" v-model="search.selectDate" />
          </div>
        </div>

        <div class="r">
          <a-button type="primary" style="background:#1d6fe9" @click="handleByQueryCond">查询</a-button>
        </div>
      </div>
      <div style="margin:16px 0 12px 5px;color:#F55F4E;font-size: 14px;">
        *重新提交的“合作模式设置”的申请状态可在：“主播审核—>合作模式审核”页面查看状态及结果（审核通过后主播管理列表将会同步更新数据）
      </div>
      <!-- 表格 -->
      <div class="main-body">
        <a-table :columns="tableColumns" :pagination="false" :data-source="anchorList" :scroll="{ x: 900, y: tableHeight }">
          <!-- 个人信息 -->
          <template slot="userInfo" slot-scope="text, record">
            <p>{{ record.name || '无' }}：{{ record.phoneNumber || '无' }}</p>
            <p style="margin:0;">达人ID：{{ record.idSign || '无' }}</p>
          </template>
          <span slot="customTitle">
            <a-tooltip placement="topRight" overlayClassName="new-tooltip">
              <template slot="title">
                <p class="toop-title">结算类型</p>
                <div class="flex font-size-10 type-item-box margin-bott-10">
                  <div class="flex wid-45 ali-item-cen">
                    <p class="type-tag">A</p>
                    <div>
                      <p>CRM类型</p>
                      <p>费用：坑位费</p>
                    </div>
                  </div>
                  <div class="flex wid-55 ali-item-cen">
                    <p class="type-tag">C</p>
                    <div>
                      <p>CPS+车马费类型</p>
                      <p>费用：车马费+小达人佣金+中达人佣金</p>
                    </div>
                  </div>
                </div>
                <div class="flex font-size-10 type-item-box">
                  <div class="flex wid-45 ali-item-cen">
                    <p class="type-tag">B</p>
                    <div>
                      <p>CPM+CPS类型</p>
                      <p>费用：坑位费+小达人佣金</p>
                    </div>
                  </div>
                  <div class="flex wid-55 ali-item-cen">
                    <p class="type-tag">D</p>
                    <div>
                      <p>CPS类型</p>
                      <p>费用：小达人佣金+中达人佣金+大达人佣金</p>
                    </div>
                  </div>
                </div>
              </template>
              合作类型<a-icon type="question-circle" style="color:#0090FF;margin-left:5px;" />
            </a-tooltip>
          </span>
          <template slot="accountContent" slot-scope="text, record">
            <p>账户类型：{{ record.accountContent || '无' }}</p>
            <p>结算类型：{{ record.settlementTypeContent || '无' }}</p>
            <p style="margin:0;">主播平台：{{ record.platform || '无' }}</p>
          </template>
          <!-- 操作 -->
          <template slot="action" slot-scope="text, record">
            <a-button type="link" @click="handleAnchorSeeDesc(record.id, record.accountType)">详情</a-button>
            <a-button style="color:#F55F4E" type="link" v-if="!record.deleted" @click="handleAnchorPersonalStatusSwitch(false, record)">禁用</a-button>
            <a-button type="link" v-else @click="handleAnchorPersonalStatusSwitch(true, record)">启用</a-button>
            <a-button type="link" @click="applyMoneyFn(record)">打款</a-button>
            <a-button type="link" v-if="record.subListFlag" @click="toChidlManage(record)">子账号</a-button>
            <a-button type="link" v-if="record.cooperationFlag" @click="cooperationSetFn(record)">合作模式设置</a-button>
          </template>
        </a-table>
      </div>

      <!-- 分页 -->
      <div class="paging-container">
        <a-pagination
          :pageSize="pagination.pageSize"
          v-model="pagination.pageIndex"
          :total="pagination.total"
          showQuickJumper
          showLessItems
          :showTotal="(total) => `共 ${total} 条`"
          style="margin: 10px auto;"
          @change="handlePageChange"
        />
      </div>

      <!-- 打款申请 -->
      <a-modal class="copy-modal" width="680px" :footer="null" :visible="applyMoneyModal" @cancel="closeApply()" title="打款申请">
        <a-spin tip="提交中..." :spinning="isSubApplyLoading">
          <div class="apply-info">
            <Title :conf="{ title: '打款信息', src: require('@/assets/images/icon_dksq_dkxx@3x.png') }" class="margin-bott-10" :fontSize="16" :imgWidth="22" :imgHieght="22" />
            <div class="apply-info-box">
              <a-row :gutter="[0, 16]">
                <a-col :span="12"><span class="color-red">*</span> 收款账户类型：{{ applyInfo.receivingAccountTypeContent || '无' }}</a-col>
                <a-col :span="12"><span class="color-red">*</span> 开户行名称：{{ applyInfo.bankName || '无' }}</a-col>
              </a-row>
              <a-row :gutter="[0, 16]">
                <a-col :span="12"><span class="color-red">*</span> 收款账户卡号：{{ applyInfo.cardNumber || '无' }}</a-col>
                <a-col :span="12"><span class="color-red">*</span> 开户行姓名：{{ applyInfo.accountName || '无' }}</a-col>
              </a-row>
              <a-row :gutter="[0, 16]">
                <a-col :span="12"><span class="color-red">*</span> 身份证号：{{ applyInfo.idNumber || '无' }}</a-col>
              </a-row>
              <a-row :gutter="[0, 16]">
                <a-col :span="12">
                  <div><span class="color-red">*</span> 银行卡截图：</div>
                  <upload v-show="applyInfo.bankCardUrl" class="marg-left-80" disabled :limit="1" :value="[applyInfo.bankCardUrl] || []"></upload>
                  <span v-show="!applyInfo.bankCardUrl">无</span>
                </a-col>
                <a-col :span="12">
                  <div><span style="width:8px;display:inline-block;"> </span>开户行截图：</div>
                  <upload v-show="applyInfo.bankUrl" class="marg-left-80" disabled :limit="1" :value="[applyInfo.bankUrl] || []"></upload>
                  <span v-show="!applyInfo.bankUrl">无</span>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="apply-type">
            <Title :conf="{ title: '打款类型', src: require('@/assets/images/icon_dksq_dklx@3x.png') }" class="margin-bott-10" :fontSize="16" :imgWidth="22" :imgHieght="22" />
            <div class="apply-type-box">
              <a-form-model ref="applyMoneyModalForm" :model="applyMoneyModalForm" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                <a-row>
                  <a-col :span="12">
                    <a-form-model-item label="打款类型：" prop="cashType">
                      <a-select v-model="applyMoneyModalForm.cashType" class="filter-select" placeholder="请选择打款类型">
                        <a-select-option value="2">坑位费</a-select-option>
                        <a-select-option value="3">车马费</a-select-option>
                        <a-select-option value="4">其他</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="金额" prop="money"> <a-input v-model="applyMoneyModalForm.money"></a-input></a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <a-input v-model="applyMoneyModalForm.remark" type="textarea"></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item label="上传截图：" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <upload :limit="9" v-model="applyMoneyModalForm.remarkUrl"></upload>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
          </div>
          <div style="display:flex;justify-content: center;">
            <a-button type="" @click="submitApply(1)" style="margin-right:20px;">保存草稿</a-button>
            <a-button type="primary" @click="submitApply(0)" style="background:#1D6FE9">提交审核</a-button>
          </div>
        </a-spin>
      </a-modal>

      <!-- 合作设置 -->
      <a-modal class="copy-modal" width="680px" :footer="null" :visible="cooperationSetModal" @cancel="closeCooper()" title="合作模式设置">
        <a-spin tip="提交中..." :spinning="isSubCoopLoading">
          <div class="apply-type">
            <Title :conf="{ title: '合作信息', src: require('@/assets/images/icon_hzsz_hzxx@3x.png') }" class="margin-bott-10" :fontSize="16" :imgWidth="22" :imgHieght="22" />
            <div class="apply-type-box">
              <a-form-model ref="cooperationSetModalForm" :model="cooperationSetModalForm" :rules="coopRules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                <a-row>
                  <a-col :span="12">
                    <a-form-model-item label="结算类型：" prop="settlementType">
                      <a-select v-model="cooperationSetModalForm.settlementType" class="filter-select" @change="changeCashTypeCoop" placeholder="请选择结算类型">
                        <a-select-option value="1">A</a-select-option>
                        <a-select-option value="2">B</a-select-option>
                        <a-select-option value="3">C</a-select-option>
                        <a-select-option value="4">D</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12" v-show="showMoneyCoop">
                    <a-form-model-item :label="moneyLabelCoop" prop="money"> <a-input v-model="cooperationSetModalForm.money"></a-input></a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item prop="cooperateStartTime" label="合作时间：" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <a-range-picker :disabledDate="disabledDate" v-model="cooperationSetModalForm.selectDate" />
                      <!-- [] -->
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24" style="margin-top:8px;">
                    <a-form-model-item label="合同" prop="contractUrl" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <upload :limit="9" v-model="cooperationSetModalForm.contractUrl"></upload>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row style="position: relative;top: -10px;">
                  <a-col :span="24">
                    <a-form-model-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <a-input v-model="cooperationSetModalForm.remark" type="textarea"></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item label="上传截图：" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <upload :limit="9" v-model="cooperationSetModalForm.contractImageUrl"></upload>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
          </div>
          <div class="apply-info" v-if="getCooperationInfo && getCooperationInfo.length > 0">
            <Title :conf="{ title: '合作记录', src: require('@/assets/images/icon_hzsz_hzjl@3x.png') }" class="margin-bott-10" :fontSize="16" :imgWidth="22" :imgHieght="22" />
            <div class="apply-info-box cooper-box" v-for="item in getCooperationInfo" :key="item.id">
              <a-descriptions>
                <a-descriptions-item label="结算类型">{{ item.settlementTypeContent || '无' }}</a-descriptions-item>
                <a-descriptions-item v-if="item.money && item.settlementTypeContent !== 'D'" :label="item.settlementType === 'A' || item.settlementType === 'B' ? '坑位费' : '车马费'">{{
                  (item.money / 100).toFixed(2) || '0'
                }}</a-descriptions-item
                ><br />
                <a-descriptions-item label="合作时间" :span="3">{{ item.cooperateStartTime || '无' }} 至 {{ item.cooperateEndTime || '无' }}</a-descriptions-item>
                <a-descriptions-item label="备注" :span="6">{{ item.remark || '无' }}</a-descriptions-item>
              </a-descriptions>
              <a-descriptions class="desc-box">
                <a-descriptions-item label="合同" :span="3">
                  <upload v-show="item.urlList" disabled style="margin-bottom:-15px;" :limit="1" :value="item.urlList || []"></upload>
                  <span v-show="!item.urlList">无</span>
                </a-descriptions-item>
                <a-descriptions-item label="截图" :span="3">
                  <upload v-show="item.remarkList" disabled :limit="1" :value="item.remarkList || []"></upload>
                  <span v-show="!item.remarkList">无</span>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
          <div style="display:flex;justify-content: center;">
            <!-- <a-button type="" @click="submitCoop(0)" style="margin-right:20px;">保存草稿</a-button> -->
            <a-button type="" @click="closeCooper()" style="margin-right:20px;">关闭</a-button>
            <a-button type="primary" @click="submitCoop(1)" style="background:#1D6FE9">提交审核</a-button>
          </div>
        </a-spin>
      </a-modal>
    </div>
  </a-spin>
</template>

<script>
import {
  getAnchorInfoList as getAnchorInfoListApi,
  anchorPersonalStatusSwitch as anchorPersonalStatusSwitchApi,
  cooperateDetail,
  cooperateInfoList,
  cooperateSet,
  accountDetail,
  anchorsApply,
  cashDraftDetail
} from '@/service'
import { safeDiv } from '@/util'
import Title from '../anchorManagDesc/components/Title'
import upload from '@/components/upload/upload'
import moment from 'moment'
const g = function(row = {}) {
  return {
    selectDate: row.selectDate || [],
    contractUrl: row.contractUrl || [],
    money: row.money ? (row.money / 100).toFixed(2) : 0,
    contractImageUrl: row.contractImageUrl || [],
    remark: row.remark || '',
    accountType: row.accountType || '',
    agentId: row.agentId || '',
    id: row.id || '',
    settlementType: row.settlementType ? String(row.settlementType) : undefined
    // cooperateStartTime: row.selectDate[0] ? moment(row.selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
    // cooperateEndTime: row.selectDate[1] ? moment(row.selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
  }
}
const g1 = function(row = {}) {
  return {
    status: row.status ? String(row.status) : undefined,
    remarkUrl: row.remarkUrl || [],
    money: row.money ? (row.money / 100).toFixed(2) : 0,
    remark: row.remark || '',
    accountType: row.accountType || '',
    agentId: row.agentId || '',
    id: row.id || '',
    cashType: row.cashType ? String(row.cashType) : undefined
    // cooperateStartTime: row.selectDate[0] ? moment(row.selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
    // cooperateEndTime: row.selectDate[1] ? moment(row.selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
  }
}
export default {
  name: 'anchorManag',
  components: {
    Title,
    upload
  },
  data() {
    let checkDate = (rule, value, callback) => {
      const { selectDate = [] } = this.cooperationSetModalForm || {}
      if (selectDate && selectDate.length > 0) {
        callback()
      } else {
        callback(new Error('请选择合作时间'))
      }
    }
    let checkMoney = (rule, value, callback) => {
      var pattern = /^\d+(\.\d+)?$/
      if (!value) {
        callback(new Error('请输入金额'))
      } else if (!pattern.test(value) && value) {
        callback(new Error('金额格式有误'))
      } else {
        callback()
      }
      // callback()
    }
    return {
      moment,
      // 坑位费等
      showMoneyCoop: false,
      moneyLabelCoop: '金额',
      // 提交合作设置loading
      isSubCoopLoading: false,
      // 打款申请loading
      isSubApplyLoading: false,
      // loading是否显示
      isLoading: false,
      // table数据查询条件
      // 分页
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      search: {
        // 状态（0-合作中；1-已禁用）
        status: '',
        // 关键字查询 （电话号码等值查询；达人id模糊查询；主播姓名模糊查询）
        keyWord: '',
        // 申请时间
        selectDate: [],
        // 结算类型 1-A；2-B；3-C；4-D
        settlementType: undefined,
        // 账户类型 1-个人；2-公司
        accountType: undefined
      },
      cooperateId: '',
      toolClass: { top: '10px' },
      // 主播列表
      anchorList: [],
      // 主播列表总数据条数
      anchorTotal: 0,
      // 申请打款
      applyMoneyModal: false,
      // 打款信息
      applyInfo: {},
      // 申请打款信息
      applyMoneyModalForm: g1(),
      rules: {
        cashType: [
          {
            required: true,
            message: '请选择打款类型',
            trigger: 'blur'
          }
        ],
        money: [
          {
            validator: checkMoney,
            message: '请输入金额',
            trigger: 'blur',
            required: true
          }
        ]
      },
      // 合作设置
      cooperationSetModal: false,
      cooperationSetModalForm: g(),
      getCooperationInfo: [],
      coopRules: {
        settlementType: [
          {
            required: true,
            message: '请选择结算类型',
            trigger: 'blur'
          }
        ],
        cooperateStartTime: [{ validator: checkDate, trigger: 'blur', message: '请设置合同时间', required: true }],
        contractUrl: [{ required: true, message: '请上传合同', trigger: 'blur' }],
        money: [
          {
            validator: checkMoney,
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  computed: {
    // table配置
    tableColumns() {
      return [
        { title: 'ID', width: 100, dataIndex: 'id' },
        { title: '合作时间', width: 200, dataIndex: 'cooperateAuditTime', sorter: (a, b) => Date.parse(new Date(a.cooperateAuditTime)) - Date.parse(new Date(b.cooperateAuditTime)) },
        { title: '个人信息', width: 260, dataIndex: 'userInfo', scopedSlots: { customRender: 'userInfo' } },
        {
          title: '今日佣金收益',
          width: 150,
          sorter: (a, b) => a.commissionToday - b.commissionToday,
          dataIndex: 'commissionToday',
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        {
          title: '今日订单量',
          width: 130,
          sorter: (a, b) => a.orderToday - b.orderToday,
          dataIndex: 'orderToday',
          customRender: (data) => {
            return data || 0
          }
        },
        {
          title: '总流水',
          width: 130,
          sorter: (a, b) => a.totalTurnover - b.totalTurnover,
          dataIndex: 'totalTurnover',
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        {
          title: '佣金金额',
          width: 130,
          sorter: (a, b) => a.totalCommission - b.totalCommission,
          dataIndex: 'totalCommission',
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        {
          title: '已提现',
          width: 130,
          dataIndex: 'inCashed',
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        // {
        //   title: '提现中',
        //   width: 130,
        //   dataIndex: 'inCashing',
        //   customRender: (data) => {
        //     if (!data) return '￥0'
        //     return '￥' + safeDiv(data, 100)
        //   }
        // },
        {
          title: '退款总金额',
          width: 130,
          dataIndex: 'totalRefundMoney',
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        {
          title: '总订单量',
          width: 130,
          sorter: (a, b) => a.totalOrder - b.totalOrder,
          dataIndex: 'totalOrder',
          customRender: (data) => {
            return data || 0
          }
        },
        {
          title: '总退款量',
          width: 130,
          sorter: (a, b) => a.totalRefund - b.totalRefund,
          dataIndex: 'totalRefund',
          customRender: (data) => {
            return data || 0
          }
        },
        { width: 150, dataIndex: 'accountContent', scopedSlots: { customRender: 'accountContent' }, slots: { title: 'customTitle' } },
        { title: '账号状态', width: 130, dataIndex: 'deletedContent' },
        { title: '渠道经理', width: 160, dataIndex: 'auditChannelManagerName' },
        { title: '操作', width: 200, fixed: 'right', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
      ]
    },

    // 状态
    anchorPersonalStatus() {
      return [
        {
          name: '合作中',
          value: 0
        },
        {
          name: '已禁用',
          value: 1
        },
        {
          name: '已到期',
          value: 2
        }
      ]
    }
  },

  methods: {
    disabledDate(current) {
      return current < moment().subtract(1, 'day') // 今天之后的年月日不可选，不包括今天
    },
    /**
     * 查看主播详情
     * @param {number} id 主播id
     * @param {number} accountType 账户类型
     * @returns {void}
     */
    handleAnchorSeeDesc(id, accountType) {
      this.$router.push({
        path: '/anchorManag/desc',
        query: {
          id,
          accountType
        }
      })
    },

    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.pagination.pageIndex = num
      this.query()
      this.setPath(this.getParams())
    },

    /**
     * 通过条件查询
     * @returns {void}
     */
    handleByQueryCond() {
      this.pagination.pageIndex = 1
      this.query()
    },

    /**
     * 切换合作状态
     * @param {boolean} status true-启用；false-禁用
     * @param {object} record 被操作的数据
     * @returns {void}
     */
    handleAnchorPersonalStatusSwitch(status, record) {
      const { $confirm, query, $messageSend } = this
      let title = '禁用',
        content = '禁用后，主播达人账号将不能申请提现',
        okType = 'danger'

      // 启用
      if (status) {
        okType = 'primary'
        content = '启用后，主播达人账号恢复正常，可正常使用与结算'
        title = '启用'
      }

      $confirm({
        title,
        content,
        okText: title,
        okType,
        onOk: () => {
          // 发送请求
          return anchorPersonalStatusSwitchApi({
            accountType: record.accountType,
            applyType: status ? 1 : 2,
            id: record.id
          })
            .then((rs) => {
              $messageSend.success('操作成功')
              query()
            })
            .catch((err) => err)
        }
      })
    },

    // 申请打款
    applyMoneyFn(item) {
      const { accountType, id } = item
      const { getAccountList, getAccountDetail } = this
      this.applyMoneyModalForm.accountType = accountType
      this.applyMoneyModalForm.agentId = id
      Promise.all([getAccountList(), getAccountDetail()]).then(() => {
        this.applyMoneyModal = true
      })
    },
    // 合作设置
    cooperationSetFn(item = {}) {
      const { accountType, id, cooperateId } = item
      this.cooperationSetModalForm.accountType = accountType
      this.cooperationSetModalForm.agentId = id
      this.cooperateId = cooperateId
      console.log(this.cooperationSetModalForm)
      const { getCoopDetail, getCoopDetailInfo } = this
      Promise.all([getCoopDetail(), getCoopDetailInfo()]).then((res) => {
        console.log(res)
        console.log(this.cooperationSetModalForm)
        this.cooperationSetModal = true
      })
    },
    // 提交合作设置 status 0 草稿 1 提交审核
    submitCoop(status = 1) {
      this.$refs.cooperationSetModalForm.validate((valid, obj = {}) => {
        let isValid = false
        if (status === 0) {
          isValid = true
          this.$refs.cooperationSetModalForm.clearValidate()
        } else {
          isValid = valid
        }
        if (this.cooperationSetModalForm.settlementType === '4') {
          this.$refs.cooperationSetModalForm.clearValidate(['money'])
          this.cooperationSetModalForm.money = ''
          if (obj && obj.money) {
            isValid = true
          }
        }
        if (isValid) {
          const { agentId, id, accountType, contractUrl = [], remark, selectDate = [], settlementType, contractImageUrl, money } = this.cooperationSetModalForm || {}
          if (contractUrl.length === 0) {
            this.$messageSend.error('请上传合同图片')
            return
          }
          const postParams = {
            id,
            agentId,
            accountType,
            contractUrl,
            settlementType,
            contractImageUrl,
            money: money ? money * 100 : '',
            remark,
            cooperateStartTime: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
            cooperateEndTime: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
          }
          this.isSubCoopLoading = true
          cooperateSet(postParams)
            .then((res) => {
              this.query()
              this.closeCooper()
              this.cooperationSetModalForm = g({})
            })
            .finally(() => {
              this.isSubCoopLoading = false
            })
            .catch(() => {
              this.isSubCoopLoading = false
            })
        }
      })
    },
    closeApply() {
      this.applyMoneyModal = false
    },
    closeCooper() {
      this.cooperationSetModal = false
      let form = this.$refs.cooperationSetModalForm
      if (form && form.clearValidate) {
        this.$nextTick(() => {
          form.clearValidate()
        })
      }
    },
    // 提交打款申请 status 1 草稿 0 提交审核
    submitApply(status = 1) {
      this.$refs.applyMoneyModalForm.validate((valid, obj = {}) => {
        let isValid = false
        if (status === 1) {
          isValid = true
          this.$refs.applyMoneyModalForm.clearValidate()
        } else {
          isValid = valid
        }
        if (isValid) {
          const { agentId, id, remarkUrl, accountType, cashType, remark, money } = this.applyMoneyModalForm || {}
          const postParams = {
            id,
            agentId,
            accountType,
            remarkUrl,
            status,
            cashType,
            money: money ? money * 100 : '',
            remark
          }
          this.isSubApplyLoading = true
          anchorsApply(postParams)
            .then((res) => {
              console.log(res)
              this.query()
              this.applyMoneyModal = false
              this.applyMoneyModalForm = g1({})
            })
            .finally(() => {
              this.isSubApplyLoading = false
            })
            .catch(() => {
              this.isSubApplyLoading = false
            })
        }
      })
    },
    getCoopDetail() {
      const { cooperateId = '' } = this
      const { accountType, agentId } = this.cooperationSetModalForm || {}
      return new Promise((resolve) => {
        cooperateDetail({
          id: cooperateId || 0
        })
          .then((res = {}) => {
            const { cooperateEndTime, cooperateStartTime, settlementType } = res
            this.cooperationSetModalForm = g(res)
            if (cooperateEndTime && cooperateStartTime) {
              this.cooperationSetModalForm.selectDate = [cooperateStartTime, cooperateEndTime]
            }
            this.cooperationSetModalForm.agentId = agentId
            this.cooperationSetModalForm.accountType = accountType
            if (settlementType !== 4) {
              this.showMoneyCoop = true
            } else {
              this.showMoneyCoop = false
            }
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    // 获取合作设置详情
    getCoopDetailInfo() {
      const { accountType, agentId } = this.cooperationSetModalForm || {}
      return new Promise((resolve) => {
        cooperateInfoList({
          id: agentId,
          accountType
        })
          .then((res = {}) => {
            console.log(res)
            this.getCooperationInfo = res || []
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    // 获取打款信息-LIST
    getAccountList() {
      const { accountType, agentId } = this.applyMoneyModalForm || {}
      return new Promise((resolve) => {
        accountDetail({
          id: agentId,
          accountType
        })
          .then((res = {}) => {
            console.log(res)
            this.applyInfo = res || {}
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    // 获取打款信息-草稿
    getAccountDetail() {
      const { accountType, agentId } = this.applyMoneyModalForm || {}
      return new Promise((resolve) => {
        cashDraftDetail({
          id: agentId,
          accountType
        })
          .then((res = {}) => {
            this.applyMoneyModalForm = g1(res)
            this.applyMoneyModalForm.agentId = agentId
            this.applyMoneyModalForm.accountType = accountType
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    // 子账号
    toChidlManage(item = {}) {
      const { id } = item
      this.$router.push({
        path: '/anchorManag/childManage',
        query: {
          id
        }
      })
    },
    // 拿参数
    getParams() {
      const { pageIndex, pageSize } = this.pagination
      const { keyWord, accountType, settlementType, status, selectDate } = this.search

      return {
        pageIndex,
        pageSize,
        accountType,
        settlementType,
        status,
        keyWord,
        startTime: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
        endTime: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
      }
    },
    // 设置搜索
    setSearch() {
      const { pageIndex, keyWord, startTime, endTime, accountType, settlementType, status } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          settlementType: settlementType ? Number(settlementType) : undefined,
          accountType: accountType || undefined,
          status: status || '',
          selectDate: startTime && endTime ? [moment(Number(startTime)), moment(Number(endTime))] : [],
          //  selectDate: beginTime ? Number(beginTime) : null,
          //  endTime: endTime ? Number(endTime) : null,
          keyWord
        }
      }
    },
    // 初始化
    initQuery() {
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 10
      this.setPath(this.getParams())
      this.query()
    },

    /**
     * 获取主播信息列表
     * 具体参数参考 getAnchorInfoListApi 方法
     * @returns {Promise<void>}
     */
    query() {
      this.isLoading = true
      getAnchorInfoListApi(this.getParams())
        .then((rs) => {
          this.anchorList = Object.freeze(rs.anchorManagementListDataList) || []
          this.pagination.total = rs.total || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 储存搜索字段
    setPath(origin) {
      const { path } = this.$route
      const query = {}
      for (let key in origin) {
        if (origin[key]) query[key] = origin[key]
      }
      if (query.pageIndex <= 1) delete query.pageIndex
      delete query.pageSize
      this.$router
        .replace({
          path,
          query: {
            ...query
          }
        })
        .catch(() => {})
    },
    changeCashTypeCoop(e) {
      if (e === '1' || e === '2') {
        this.showMoneyCoop = true
        this.moneyLabelCoop = '坑位费'
      } else if (e === '3') {
        this.showMoneyCoop = true
        this.moneyLabelCoop = '车马费'
      } else {
        this.showMoneyCoop = false
      }
    }
  },

  mounted() {
    this.setSearch()
    this.query()
  }
}
</script>
<style>
.new-tooltip {
  width: 460px !important;
  max-width: inherit !important;
}
</style>
<style lang="less" scoped>
.anchor-manag {
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
}
.flex {
  display: flex;
}
.wid-45 {
  width: 42%;
}
.wid-55 {
  width: 58%;
}
.font-size-10 {
  font-size: 10px;
}
.type-item-box {
  p {
    margin: 0;
  }
}
.ali-item-cen {
  align-items: center;
}
.type-tag {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  line-height: 25px;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  margin-right: 6px !important;
}
.margin-bott-10 {
  margin-bottom: 10px;
}
.marg-left-80 {
  margin-left: 90px !important;
  margin-top: -20px !important;
}
.toop-title {
  margin-bottom: 10px;
}
.apply-info {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 16px 12px;
  margin-top: -15px;
  margin-bottom: 15px;
  &-box {
    margin-left: 22px;
  }
  .color-red {
    color: #f55f4e;
  }
}
.cooper-box {
  background: #fff;
  border-radius: 4px;
  margin-left: 0;
  padding: 16px 30px 0 30px;
  margin-bottom: 10px;
  // /deep/ .ant-descriptions-item > span {
  //   min-width: 70px;
  // }
  .desc-box {
    /deep/ .ant-descriptions-item {
      display: flex;
    }
  }
  // /deep/ .ant-descriptions-item {
  //   width: 100%;
  // }
}
/deep/ .ant-form-item {
  margin-bottom: 8px;
}
.search-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  > div {
    margin-right: 15px;
    margin-bottom: 5px;
  }
}
</style>
